@charset "UTF-8";
/*  @Author: mowencong */
#baiyang { width: 100%; min-width: 1230px; }

#baiyang #top { width: 100%; background: #FAFAFA; }

#baiyang #top .top_l { height: 30px; }

#baiyang #top .top_l .wel { height: 30px; line-height: 30px; font-size: 14px; }

#baiyang #top .top_l .wel a { color: #000; padding: 0 2px; }

#baiyang #top .top_r { height: 30px; }

#baiyang #top .top_r .top_r_list { height: 30px; }

#baiyang #top .top_r .top_r_list li { z-index: 999; }

#baiyang #top .top_r .top_r_list .list0 { position: relative; float: left; margin-left: 18px; font-size: 14px; line-height: 30px; color: #777777; }

#baiyang #top .top_r .top_r_list .list0 .font { display: inline-block; margin-left: 5px; color: #777777; font-weight: normal; }

#baiyang #top .top_r .top_r_list .list0 .li-list { z-index: 999; position: position; }

#baiyang #top .top_r .top_r_list .list0 .li-list dl { display: none; }

#baiyang #top .top_r .top_r_list .list0 .li-list dl dt { height: 30px; line-height: 30px; text-align: center; cursor: pointer; z-index: 999; }

#baiyang #top .top_r .top_r_list .list0 .li-list dl dt:hover { background: #FAFAFA; }

#baiyang #top .top_r .top_r_list .list0 .li-list dl a { color: #777; text-decoration: none; }

#baiyang #top .top_r .top_r_list .list0:hover { box-shadow: 0 0 1px 0; background: #fff; }

#baiyang #top .top_r .top_r_list .list0:hover dl { display: block; }

#baiyang #top .top_r .top_r_list .list0:hover .font { transform: rotate(180deg); transition-duration: 1s; }

#baiyang #header { width: 100%; }

#baiyang #header .header-l h1 { width: 220px; height: 60px; background: url(../img/logo.png) no-repeat; text-indent: -10000px; margin: 38px 0; }

#baiyang #header .header-c { margin: 48px 0; margin-left: 50px; }

#baiyang #header .header-c .search-l { width: 70px; height: 40px; text-align: center; border-radius: 0; }

#baiyang #header .header-c .search-l:hover .menu { display: block; }

#baiyang #header .header-c .menu { margin: 0; min-width: 70px; text-align: center; border-radius: 0; }

#baiyang #header .header-c .menu .menu li { height: 50px; line-height: 50px; }

#baiyang #header .header-c .search-c { width: 425px; border: 1px solid #ccc; height: 40px; border-radius: 0; }

#baiyang #header .header-c .search-r { width: 60px; height: 40px; background: #EF3C79; color: #fff; font-size: 14px; text-align: center; line-height: 40px; }

#baiyang #header .header-c .header-list { margin-top: 8px; }

#baiyang #header .header-c .header-list li { float: left; }

#baiyang #header .header-c .header-list li a { font-size: 14px; margin-right: 12px; color: #777; text-decoration: none; }

#baiyang #header .header-r { margin: 48px 0; }

#baiyang #header .header-r div { width: 130px; height: 40px; line-height: 40px; text-align: center; background: #FAFAFA; box-shadow: 0 0 1px 0; z-index: -9999; }

#baiyang #header .header-r .shop { position: relative; margin-right: 10px; z-index: 3; }

#baiyang #header .header-r .shop:hover .shop-list { display: block; border: none; }

#baiyang #header .header-r .shop:hover { background: #fff; }

#baiyang #header .header-r .shop:hover .up { transform: rotate(180deg); transition-duration: 1s; }

#baiyang #header .header-r .shop .shop-list { position: absolute; width: 350px; height: 235px; right: 0; background: #fff; display: none; }

#baiyang #header .header-r .shop .shop-list .dl0 { background: #fff; font-size: 14px; background: #ccc; }

#baiyang #header .header-r .shop .shop-list .dl0 .dt1 { height: 50px; line-height: 50px; background: #fff; border-bottom: 1px solid #ccc; text-align: right; }

#baiyang #header .header-r .shop .shop-list .dl0 .dt1 a { color: #f00; }

#baiyang #header .header-r .shop .shop-list .dl0 .dt1 i { color: #f00; }

#baiyang #header .header-r .shop .shop-list .dl0 .dl1 { width: 175px; border-right: 1px solid #ccc; }

#baiyang #header .header-r .shop .shop-list .dl0 .dl1 dd { height: 30px; line-height: 30px; text-align: left; margin-left: 10px; }

#baiyang #header .header-r .shop .shop-list .dl0 .dl1 dd a { color: #f00; text-decoration: none; }

#baiyang #header .header-r .shop .shop-list .dl0 .dl2 dd { height: 30px; line-height: 30px; }

#baiyang #header .header-r .shop .shop-list .dl0 .dl2 dd a { color: #f00; text-decoration: none; }

#baiyang #header .header-r .shop .shop-list .dl0 .dl2 dd i { color: #f00; }

#baiyang #header .header-r .shop .shop-list .dl0 .dt2 { margin: 0 10px; border-top: 1px solid #ccc; line-height: 40px; }

#baiyang #header .header-r .shop .shop-list .dl0 .dt2 a { margin-left: 145px; color: #f00; text-decoration: none; }

#baiyang #header .header-r .shop .shop-list .ts { position: absolute; width: 100%; height: 30px; margin-top: 130px; text-align: center; line-height: 30px; }

#baiyang #header .header-r .cart { position: relative; z-index: 3; }

#baiyang #header .header-r .cart .cart-list { position: absolute; width: 345px; right: -1px; border: 1px solid #ccc; background: #fff; display: none; }

#baiyang #header .header-r .cart .cart-list li { height: 50px; line-height: 50px; text-align: left; }

#baiyang #header .header-r .cart .cart-list li:nth-child(1) { border-bottom: 1px solid #ccc; padding-left: 10px; }

#baiyang #header .header-r .cart .cart-list li:nth-child(3) { background: #ccc; text-align: right; padding-right: 10px; }

#baiyang #header .header-r .cart .cart-list .js { background: #EF3C79; }

#baiyang #header .header-r .cart:hover { border-bottom: none; background: #fff; }

#baiyang #header .header-r .cart:hover .cart-list { display: block; }

#baiyang #header .header-r .cart:hover .up { transform: rotate(180deg); transition-duration: 1s; }

#baiyang #header .header-r i { color: #ccc; margin-right: 10px; }

#baiyang #header .header-r .up { margin-left: 5px; }

#baiyang #nav { width: 100%; }

#baiyang #nav .nav-list { width: 720px; height: 38px; }

#baiyang #nav .nav-list .all { position: relative; width: 210px; height: 38px; line-height: 38px; background: #EF3C79; color: #fff; font-size: 14px; }

#baiyang #nav .nav-list .all i { margin: 0 10px; }

#baiyang #nav .nav-list .all .sanji { position: absolute; z-index: 999; background: #F6F7F2; display: none; }

#baiyang #nav .nav-list .all .sanji .sanji0 { position: relative; }

#baiyang #nav .nav-list .all .sanji .sanji0 .sanji00 { display: block; color: #000; width: 210px; padding-left: 20px; }

#baiyang #nav .nav-list .all .sanji .sanji0:hover { background: #fff; }

#baiyang #nav .nav-list .all .sanji .sanji0:hover .sanji00 { padding-left: 30px; transition-duration: 1s; }

#baiyang #nav .nav-list .all .sanji .sanji01:hover .sanji1 { display: block; }

#baiyang #nav .nav-list .all .sanji1 { position: absolute; left: 210px; top: 0px; z-index: 999; width: 990px; height: 500px; background: #fff; display: none; }

#baiyang #nav .nav-list .all .sanji1 .sanji11 { margin-left: 30px; height: 50px; }

#baiyang #nav .nav-list .all .sanji1 .sanji11 li { float: left; background: #999; margin: 10px; }

#baiyang #nav .nav-list .all .sanji1 .sanji11 li a { display: block; height: 30px; line-height: 30px; text-align: center; width: 80px; color: #000; }

#baiyang #nav .nav-list .all .sanji1 .sanji2 { height: 30px; margin: 10px; }

#baiyang #nav .nav-list .all .sanji1 .sanji2 p { line-height: 20px; display: inline-block; margin-left: 80px; }

#baiyang #nav .nav-list .all .sanji1 .sanji2 p a { color: #000; }

#baiyang #nav .nav-list .all .sanji1 .sanji2 p span { color: #000; margin-left: 10px; }

#baiyang #nav .nav-list .all .sanji1 .sanji2 .sanji3 { height: 30px; margin-left: 20px; display: inline-block; border-bottom: 1px solid #999; }

#baiyang #nav .nav-list .all .sanji1 .sanji2 .sanji3 li { float: left; }

#baiyang #nav .nav-list .all .sanji1 .sanji2 .sanji3 li a { display: block; height: 20px; line-height: 20px; text-align: center; width: 80px; color: #000; border-right: 1px solid #999; }

#baiyang #nav .nav-list .all .sanji1 .sanji2 .sanji3 li .sanji111 { border-left: 1px solid #ccc; }

#baiyang #nav .nav-list .all .sanji1 .sanji2 .sanji3 li .sanji55 { border-right: none; }

#baiyang #nav .nav-list .all .sanji1 .sanji4 { height: 50px; margin: 10px; }

#baiyang #nav .nav-list .all .sanji1 .sanji4 p { line-height: 20px; display: inline-block; margin-left: 80px; }

#baiyang #nav .nav-list .all .sanji1 .sanji4 p a { color: #000; }

#baiyang #nav .nav-list .all .sanji1 .sanji4 p span { color: #000; margin-left: 10px; }

#baiyang #nav .nav-list .all .sanji1 .sanji4 .sanji5 { display: inline-block; margin-left: 10px; height: 30px; }

#baiyang #nav .nav-list .all .sanji1 .sanji4 .sanji5 li { float: left; }

#baiyang #nav .nav-list .all .sanji1 .sanji4 .sanji5 li a { display: block; height: 20px; line-height: 20px; text-align: center; width: 80px; color: #000; border-right: 1px solid #999; }

#baiyang #nav .nav-list .all:hover .sanji { display: block; }

#baiyang #nav .nav-list .navlist { margin-bottom: 0; }

#baiyang #nav .nav-list .navlist li { float: left; }

#baiyang #nav .nav-list .navlist li a { height: 38px; margin-right: 46px; line-height: 38px; color: #000; font-size: 16px; font-weight: bold; text-decoration: none; }

#baiyang #nav .nav-list .navlist li:hover a { color: #EF3C79; }

#baiyang #nav .nav-list .navlist .index { margin-left: 25px; }

#baiyang #nav .nav-list .navlist .last { margin-right: 0; }

#baiyang #nav .page { width: 100%; margin-top: 1px; border-bottom: 2px solid #EF3C79; }

#baiyang #main-nav { widows: 100%; height: 40px; }

#baiyang #main-nav ul { height: 40px; margin-bottom: 0; }

#baiyang #main-nav ul li { float: left; height: 40px; line-height: 40px; color: #999999; font-size: 14px; margin-right: 10px; }

#baiyang #main-nav ul li a { display: inline-block; width: 60px; height: 60px; text-decoration: none; text-align: center; line-height: 40px; color: #000; }

#baiyang #main-nav ul li a i { margin-right: 20px; }

#baiyang .datalist { width: 100%; height: 467px; }

#baiyang .datalist .datal { width: 370px; height: 467px; border: 1px solid #ccc; }

#baiyang .datalist .datal .datal1 { position: relative; float: left; width: 360px; height: 360px; overflow: hidden; text-align: center; }

#baiyang .datalist .datal .datal1 .big { width: 360px; height: 360px; }

#baiyang .datalist .datal .minimg { width: 360px; height: 360px; background: #F9F9F9; }

#baiyang .datalist .datal .minimg img { max-width: 220px; max-height: 220px; border: 1px solid #EF3C79; }

#baiyang .datalist .datal .minimg .min { border: 1px solid #EF3C79; }

#baiyang .datalist .datal .shar { width: 370px; height: 40px; }

#baiyang .datalist .datal .shar a { display: inline-block; height: 30px; width: 80px; line-height: 30px; text-align: center; border: 1px solid #ccc; color: #000; margin: 5px 5px; }

#baiyang .datalist .datal .shar a:hover { background: #ccc; }

#baiyang .datalist .datar { width: 830px; height: 467px; border: 1px solid #ccc; }

#baiyang .datalist .datar .datar1 { height: 86px; margin-left: 20px; }

#baiyang .datalist .datar .datar1 p { margin-bottom: 0; }

#baiyang .datalist .datar .datar1 p:nth-child(1) { height: 33px; line-height: 33px; color: #B029B1; font-size: 14px; }

#baiyang .datalist .datar .datar1 p:nth-child(2) { height: 53px; line-height: 53px; font-size: 18px; color: #000; }

#baiyang .datalist .datar .datar2 { height: 140px; background: #EDEDED; }

#baiyang .datalist .datar .datar2 p { margin-left: 20px; }

#baiyang .datalist .datar .datar2 p:nth-child(1) { font-size: 16px; height: 40px; line-height: 40px; }

#baiyang .datalist .datar .datar2 p:nth-child(1) span { margin-right: 30px; }

#baiyang .datalist .datar .datar2 p:nth-child(2) { height: 45px; line-height: 30px; }

#baiyang .datalist .datar .datar2 p:nth-child(2) span { margin-right: 30px; }

#baiyang .datalist .datar .datar2 p:nth-child(2) span:nth-child(2) { font-size: 30px; color: #EF3C79; font-weight: bold; }

#baiyang .datalist .datar .datar2 p:nth-child(3) { height: 50px; line-height: 20px; }

#baiyang .datalist .datar .datar2 p:nth-child(3) span { margin-right: 20px; }

#baiyang .datalist .datar .datar2 p:nth-child(3) a { margin-left: 20px; }

#baiyang .datalist .datar .datar3 { margin-left: 18px; width: 743px; height: 243px; }

#baiyang .datalist .datar .datar3 .datar31 { height: 56px; line-height: 56px; }

#baiyang .datalist .datar .datar3 .datar31 span { color: #B299B2; font-size: 14px; margin-right: 10px; }

#baiyang .datalist .datar .datar3 .datar31 .have { font-size: 18px; color: #EF3C79; font-weight: bold; margin-left: 10px; }

#baiyang .datalist .datar .datar3 .datar31 input { border: 1px solid #ccc; width: 95px; height: 30px; }

#baiyang .datalist .datar .datar3 .datar32 { height: 30px; line-height: 30px; font-size: 14px; color: #ccc; }

#baiyang .datalist .datar .datar3 .datar32 span:nth-child(1) { margin-right: 10px; }

#baiyang .datalist .datar .datar3 .datar33 { height: 48px; line-height: 48px; }

#baiyang .datalist .datar .datar3 .datar33 input { border: 1px solid #ccc; width: 40px; text-align: center; }

#baiyang .datalist .datar .datar3 .datar33 button { margin-left: -13; display: inline-block; width: 27px; height: 25px; text-align: center; font-size: 12px; color: #ccc; background: #fff; }

#baiyang .datalist .datar .datar3 .datar33 .addnum { top: -11px; left: -1; }

#baiyang .datalist .datar .datar3 .datar33 .jnum { top: 14px; left: -27px; }

#baiyang .datalist .datar .datar3 .datar33 .addcar { display: inline-block; height: 48px; width: 130px; line-height: 48px; color: #fff; font-size: 18px; background: #EF3C79; text-align: center; margin: 0 -10px; }

#baiyang .datalist .datar .datar3 .datar33 .addcar a { color: #fff; text-decoration: none; }

#baiyang .datalist .datar .datar3 .datar33 .addcar i { color: #fff; }

#baiyang .datalist .datar .datar3 .datar33 .buy { display: inline-block; height: 48px; width: 130px; line-height: 48px; background: #FFF4F8; text-align: center; margin-left: 20px; font-size: 18px; }

#baiyang .datalist .datar .datar3 .datar33 .buy a { color: #F03C79; text-decoration: none; }

#baiyang .datalist .datar .datar3 .datar33 .x { width: 750px; margin: 0 40px; margin-top: 18px; border-bottom: 1px dotted #ccc; }

#baiyang .datalist .datar .datar3 .datar34 { height: 40px; margin-top: 35px; }

#baiyang .datalist .datar .datar3 .datar34 p { height: 40px; line-height: 40px; color: #ccc; font-size: 14px; }

#baiyang .datalist .datar .datar3 .datar34 p img { width: 20px; height: 20px; margin: 0 10px; }

#baiyang .datalist .datar4 { margin-top: 20px; width: 212; height: 100%; }

#baiyang .datalist .datar4 .datar4-l { width: 212px; text-align: center; }

#baiyang .datalist .datar4 .datar4-l .datar4-l1 { height: 40px; width: 212px; line-height: 40px; color: #000; border: 1px solid #ccc; }

#baiyang .datalist .datar4 .datar4-l .datar4-l1 img { margin: 0 10px; }

#baiyang .datalist .datar4 .datar4-l2 { width: 212px; height: 50px; line-height: 50px; border: 1px solid #ccc; }

#baiyang .datalist .datar4 .datar4-l2 a { display: inline-block; width: 85px; height: 30px; line-height: 30px; background: #F8F8F8; color: #ccc; margin: 0 10px; }

#baiyang .datalist .datar4 .datar4-l3 { margin-top: 10px; width: 212px; height: 180px; border: 1px solid #ccc; }

#baiyang .datalist .datar4 .datar4-l3 .xg { display: block; width: 210px; height: 30px; line-height: 30px; font-size: 16px; margin-bottom: 0; background: #F7F7F7; color: #000; }

#baiyang .datalist .datar4 .datar4-l3 ul { width: 212px; height: 150px; margin: 0; padding: 0; }

#baiyang .datalist .datar4 .datar4-l3 ul li { float: left; }

#baiyang .datalist .datar4 .datar4-l3 ul li a { display: inline-block; height: 34px; line-height: 34px; width: 105px; }

#baiyang .datalist .datar5 { margin-top: 20px; width: 980px; }

#baiyang .datalist .datar5 .datar51 { width: 980px; height: 40px; border: 1px solid #ccc; }

#baiyang .datalist .datar5 .datar51 ul { width: 400px; height: 40px; margin-bottom: 0; }

#baiyang .datalist .datar5 .datar51 ul li { float: left; height: 40px; line-height: 40px; width: 125px; padding: 0 30px; border: 1px solid #ccc; }

#baiyang .datalist .datar5 .datar51 p { display: inline-block; height: 40px; line-height: 40px; width: 100px; color: #ccc; }

#baiyang .datalist .datar5 .datar51 p img { width: 25px; height: 25px; }

#baiyang .datalist .datar5 .datar52 { width: 980px; height: 50px; line-height: 50px; border: 1px solid #ccc; }

#baiyang .datalist .datar5 .datar52 span { display: inline-block; height: 50px; width: 170px; }

#baiyang .datalist .datar5 .datar53 { margin-top: 45px; width: 980px; text-align: center; }

#baiyang #bottom { margin-top: 45px; }

#baiyang #bottom .bimg2 { border-bottom: 1px solid #ccc; }

#baiyang #footer { width: 100%; margin-top: 35px; height: 250px; border-bottom: 1px solid #ccc; }

#baiyang #footer .footer-l { width: 260px; }

#baiyang #footer .footer-l h1 { width: 220px; height: 60px; background: url(../img/logo.png) no-repeat; text-indent: -10000px; }

#baiyang #footer .footer-l .gz { margin-top: 20px; margin-left: 20px; }

#baiyang #footer .footer-l .gz span { font-size: 16px; margin-right: 10px; }

#baiyang #footer .footer-l .gz a { margin-right: 10px; }

#baiyang #footer .footer-l .gz .wb { margin-top: 10px; }

#baiyang #footer .footer-l .gz .wb img { width: 100px; height: 100px; }

#baiyang #footer .footer-c { margin-top: 25px; margin-left: 50px; height: 242px; }

#baiyang #footer .footer-c ul li { float: left; width: 70px; height: 40px; line-height: 40px; margin-right: 80px; font-size: 16px; font-weight: bold; }

#baiyang #footer .footer-c ul li a { display: block; height: 30px; line-height: 30px; color: #000; text-decoration: none; font-weight: normal; font-size: 12px; }

#baiyang #footer .footer-r { margin-top: 30px; width: 260px; height: 150px; }

#baiyang #footer .footer-r .app { margin-left: 20px; }

#baiyang #footer .footer-r .tp { width: 120px; height: 120px; line-height: 110px; text-align: center; border: 1px solid #ccc; }

#baiyang #footer .footer-r .wz { width: 120px; text-align: center; font-size: 14px; }

#baiyang #end { margin-top: 25px; height: 150px; }

#baiyang #end .end1 { text-align: center; }

#baiyang #end .end1 a { display: inline-block; padding: 0 10px; height: 16px; line-height: 16px; font-size: 16px; color: #000; text-decoration: none; }

#baiyang #end .end1 .end11 { border-right: 2px solid #666; }

#baiyang #end .end2 { text-align: center; height: 40px; line-height: 40px; }

#baiyang #end .end3 { text-align: center; margin-bottom: 50px; }

#baiyang .container { /*内容、版心 提取 */ width: 1230px; margin: 0 auto; }

#baiyang a:hover { text-decoration: none; }

#side { position: fixed; height: 100%; width: 35px; right: 0; top: 0; background: #000000; margin: 0 auto; text-align: center; }

#side .pos { position: absolute; top: 15%; }

#side .login { position: relative; width: 35px; height: 50px; line-height: 50px; margin-top: 20px; margin-bottom: 20px; }

#side .login a { display: block; width: 35px; height: 50px; border-radius: 25px; }

#side .login a img { width: 35px; height: 30px; border-radius: 25px; }

#side .login .details { position: absolute; width: 100px; height: 30px; line-height: 30px; left: -100px; top: 15px; background-color: #ccc; color: #fff; display: none; }

#side .login .details::before, #side .login .details::after { content: ''; position: absolute; top: 5px; left: 99px; border: 8px solid transparent; border-left-color: #ccc; }

#side .login:hover { background: pink; }

#side .login:hover .details { display: block; }

#side .login .form { position: absolute; width: 500px; height: 500px; border: 1px solid #ccc; left: 40px; top: 10px; background: #fff; box-shadow: 0 0 5px 0; }

#side .login .form a { color: #EF3C79; }

#side .login .form .log { margin: 10px 100px; height: 80px; }

#side .login .form .log label { display: block; margin-left: -125px; width: 300px; height: 30px; }

#side .login .form .log label a { display: inline-block; width: 100px; }

#side .login .form .log input { width: 300px; height: 30px; margin-top: -100px; border: 1px solid #ccc; }

#side .login .form .psw { margin: 10px 0; height: 80px; }

#side .login .form .psw label { margin: 10px; margin-left: 30px; display: block; width: 300px; height: 30px; }

#side .login .form .psw label a { display: inline-block; width: 100px; margin-right: 10px; }

#side .login .form .psw input { width: 300px; height: 30px; margin-top: -100px; border: 1px solid #ccc; }

#side .login .form .code { margin: 10px 0; height: 80px; }

#side .login .form .code label { margin: 10px; margin-left: 12px; display: block; width: 300px; height: 30px; }

#side .login .form .code label a { display: inline-block; width: 100px; }

#side .login .form .code input { margin: 10px auto; width: 300px; height: 30px; margin-top: -100px; border: 1px solid #ccc; }

#side .login .form .lg { margin: 10px auto; height: 50px; width: 300px; background: #EF3C79; }

#side .login .form .lg a { display: inline-block; width: 100px; color: #fff; }

#side .login .form .zc { margin-right: 0; height: 50px; width: 300px; margin-left: 210px; }

#side .login .form .zc a { display: inline-block; width: 100px; }

#side .car { width: 35px; margin-bottom: 20px; border-top: 1px dotted #fff; border-bottom: 1px dotted #fff; }

#side .car i { font-size: 14px; color: #fff; }

#side .car a { display: block; width: 35px; height: 110px; font-size: 14px; color: #fff; padding: 15px 10px; text-decoration: none; }

#side .car:hover { background: pink; }

#side .msg { position: relative; width: 35px; height: 50px; line-height: 50px; margin-bottom: 20px; }

#side .msg a { display: block; color: #fff; font-size: 24px; text-decoration: none; }

#side .msg .details { position: absolute; width: 100px; height: 30px; line-height: 30px; left: -100px; top: 10px; background-color: #ccc; color: #fff; display: none; }

#side .msg .details::before, #side .msg .details::after { content: ''; position: absolute; top: 5px; left: 99px; border: 8px solid transparent; border-left-color: #ccc; }

#side .msg:hover { background: pink; }

#side .msg:hover .details { display: block; }

#side .comp { position: relative; width: 35px; height: 50px; line-height: 50px; }

#side .comp a { display: block; color: #fff; font-size: 24px; text-decoration: none; }

#side .comp .details { position: absolute; width: 100px; height: 30px; line-height: 30px; left: -100px; top: 10px; background-color: #ccc; color: #fff; display: none; }

#side .comp .details::before, #side .comp .details::after { content: ''; position: absolute; top: 5px; left: 99px; border: 8px solid transparent; border-left-color: #ccc; }

#side .comp:hover { background: pink; }

#side .comp:hover .details { display: block; }

#side .back { position: absolute; bottom: 0; }

#side .back a { font-size: 12px; color: #fff; text-decoration: none; }

#side .back .details { position: absolute; width: 100px; height: 30px; line-height: 30px; left: -100px; top: 10px; background-color: #ccc; color: #fff; display: none; }

#side .back .details::before, #side .back .details::after { content: ''; position: absolute; top: 5px; left: 99px; border: 8px solid transparent; border-left-color: #ccc; }

#side .back:hover { background: pink; }

#side .back:hover .details { display: block; }
